<!--
fault-limit
故障超限指标
-->
<template>
    <div class="fault-limits">
        <chart
        chartId="limitChart"
        :options="limitChartOption"></chart>
        <!-- 显示数据中有数据的电务段 -->
        <div class="dept-tabs">
            <ul>
                <li
                v-for="(tab, index) in tabs"
                :key="tab.id"
                :class="tabActive === index ? 'tab-active' : ''"
                @click="handleClickTab(tab, index)">
                    {{ tab.title }}
                </li>
            </ul>
        </div>

        <!-- 超限指标弹窗
amsfaultid: "95957"
atptype: "200C"
cardname: null
cardnum: null
cardproductdate: null
cardsproductdate: null
createtime: "2021-07-14 15:40:52"
createuser: "徐柱"
dcs: null
deptName: "石牌列控车载分析工区"
deptid: "154"
devicefactory: null
downList: null
endFaultDate: null
endTime: null
factoryreply: ""
faultanalyze: ""
faultdate: "2021-05-20 17:05:35"
faultinfo: "紧急制动停车;灯码[无码];CTCS[2];模式[未知];ATP报(ODO故障;测速系统故障;系统故障;);"
faulttype: "待下载数据分析处理。"
gzcat: ""
gzclassify: "故障信息"
gzcode: ""
id: "4064"
iscancle: "1"
isdmsalarm: "1"
isrecover: "0"
isreplace: "1"
isreport: "1"
isreturn: "0"
line: "0"
measures: "速传：测试合格，详见检测报告\nCODOU0 ：按设计要求更换L5,L6,L1,L2,D37,D38,总调，：执行返修章程\nCODOU2：按设计要求更换L5,L6,L1,L2,D37,D38,总调，：执行返修章程\nCCTE-B：按设计要求更换TR1,TR2,U12,U13,U33,U93,U80,U160,执行返修章程"
mileage: "未知"
oldcardnum: null
oldcardproductdate: null
oldcardsproductdate: null
operid: "D1856"
remark: ""
repairnum: 0
reported: 1
returnDayNum: null
returntime: "2021-05-26 15:38:09"
sortField: null
sortOrder: null
startFaultDate: null
startTime: null
testing: "良好"
testperson: "李雁君"
testtime: "2021-06-29 00:00:00"
tlj: "0"
totaltrainnum: "CRH2A-4063-00"
trackpeople: "徐柱"
tracksituation: "已完成"
trainid: null
trainnum: "4063-00"
traintype: "CRH2A"
upList: null
wxfaultchuli: null
wxfaultreason: null
wxfaulttype: null
wxremark: null
-->
        <el-dialog
        width="80%"
        title="故障超限详情"
        :close-on-click-modal="false"
        :visible.sync="limitVisible">
            <el-table
            :data="limitData"
            border
            height="calc(100% - 1.5rem)"
            style="width: 100%;">

            <!-- 操作
            录入部门
            报警分类
            车型
            故障设备类型
            车号端号(系)
            车次
            报警时间
            故障现象
            故障分析处理情况
            故障原因
            故障类型
             -->

            <el-table-column
            prop="deptName"
            label="录入部门">
            </el-table-column>

            <el-table-column
            prop="gzclassify"
            label="报警分类">
            </el-table-column>

            <el-table-column
            prop="traintype"
            label="车型">
            </el-table-column>

            <el-table-column
            prop="atptype"
            label="故障设备类型">
            </el-table-column>

            <el-table-column
            prop="trainnum"
            label="车号端号(系)">
            </el-table-column>

            <el-table-column
            prop="operid"
            label="车次">
            </el-table-column>

            <el-table-column
            prop="faultdate"
            label="报警时间">
            </el-table-column>

            <el-table-column
            :show-overflow-tooltip='true'
            prop="faultinfo"
            label="故障现象">
            </el-table-column>

            <el-table-column
            :show-overflow-tooltip='true'
            prop="faultanalyze"
            label="故障分析处理情况">
            </el-table-column>

            <el-table-column
            :show-overflow-tooltip='true'
            prop="faulttype"
            label="故障原因">
            </el-table-column>

            <el-table-column
            prop="gzcat"
            label="故障类型">
            </el-table-column>

           <!--  <el-table-column
            label="完成百分比">
                <template slot-scope="scope">
                    {{ getPercent(scope.row.ACTCOUNT, scope.row.COUNT) }}
                </template>
            </el-table-column> -->

            </el-table>
            <div class="pagination">
                <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalNum">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getFaultLimitData, // 获取超限指标数据接口
    getLimitInfoData, // 超限指标详情
} from '@/apis';
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'fault-limit',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    watch: {
        isClick(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.limitVisible = true;
                this.getLimitInfo();
            }
        },
    },
    data() {
        return {
            limitVisible: false,
            limitData: [],
            allChartData: [], // 请求的所有数据
            chartData1: [], // 柱状图数据
            chartData2: [], // 折线图数据
            xAxisData: [], // x轴数据
            tabActive: 0,
            // 电务段切换数据
            tabs: [/* {
                id: 0,
                title: '广州电务段',
            }, {
                id: 0,
                title: '长沙电务段',
            }, {
                id: 0,
                title: '惠州电务段',
            }, {
                id: 0,
                title: '海口综维段',
            } */],
            // 页码
            currentPage: 1,
            // 每页显示数量
            pageSize: 10,
            // 列表总数量
            totalNum: 0,
        };
    },
    computed: {

        // 故障超限指标 - echats配置
        limitChartOption() {
            const {
                size01,
            } = this;
            return {
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#18498e',
                        },
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12 * size01,
                    },
                },
                grid: {
                    top: '18%',
                    left: '6%',
                    right: '2%',
                    bottom: '17%',
                },
                tooltip: {
                    show: true,
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#333',
                        fontSize: 16 * size01, // 16
                    },
                    borderColor: '#ccc',
                },
                legend: {
                    show: true,
                    top: '2%',
                    right: '2%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * size01,
                    },
                    icon: 'circle',
                    itemWidth: 6 * size01,
                    itemHeight: 6 * size01,
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#18498e',
                            width: 1 * size01,
                        },
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12 * size01,
                    },
                    minInterval: 1,

                },
                series: [
                    {
                        data: this.chartData2,
                        name: '故障件数',
                        type: 'bar',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#0e60b0' },
                                    { offset: 1, color: '#1cabd8' },
                                ],
                            ),
                            borderRadius: [20 * size01, 20 * size01, 0, 0],
                        },
                        barWidth: 14 * size01,
                    },
                    {
                        data: this.chartData1,
                        type: 'line',
                        name: '故障指标',
                        z: 13,
                        lineStyle: {
                            type: 'dashed',
                            color: '#ecae0a',
                        },
                        symbol: 'circle',
                        symbolSize: 6 * size01,
                        itemStyle: {
                            color: '#ecae0a',
                        },
                    },
                    /* {
                        data: this.chartData2,
                        type: 'pictorialBar',
                        // z: 12,
                        symbolSize: [14 * size01, 8 * size01],
                        symbolOffset: [0, -4 * size01],
                        symbolPosition: 'end',
                        itemStyle: {
                            color: '#7ad5ff',
                            opacity: 1,
                        },
                        barWidth: 14 * size01,
                        tooltip: {
                            show: false,
                        },
                    }, */
                ],
            };
        },

        // 点击标志
        isClick() {
            return this.$store.state.showLimit;
        },

        // 当前路局
        deptId() {
            return this.tabs[this.tabActive].deptId;
        },

        // 点击当前的某个柱
        index() {
            return this.$store.state.month;
        },

        // 当前点击的时间
        curMonth() {
            return this.index > 9 ? this.index : `0${this.index}`;
        },

        // 当前年份
        curYear() {
            return new Date().getFullYear();
        },

        // 开始时间
        startTime() {
            return `${this.curYear}-${this.curMonth}-01 00:00:00`;
        },

        // 月份最后一天
        monthLastDay() {
            let result;
            if (this.index === 12) {
                result = 31;
            } else {
                const time = new Date(`${this.curYear}-0${this.index + 1}-01`).getTime() - 1000 * 24 * 60 * 60;
                result = new Date(time).getDate() > 9 ? new Date(time).getDate() : `0${new Date(time).getDate()}`;
            }
            return result;
        },

        // 结束时间
        endTime() {
            return `${this.curYear}-${this.curMonth}-${this.monthLastDay} 23:59:59`;
        },
    },
    methods: {
        // 获取故障超限指标
        getFaultLimitDatas() {
            getFaultLimitData().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.allChartData = data;
                    this.tabs = this.allChartData.map((item, index) => ({
                        id: index,
                        title: item.deptName,
                        deptId: item.deptId,
                    }));
                    this.handleClickTab(this.tabs[0], 0);
                }
            }).catch((err) => {
                window.console.log('获取故障超限指标', err);
            });
        },

        // 点击切换各部门数据
        handleClickTab(tab, index) {
            const ary = this.allChartData.filter((item) => item.deptName.includes(tab.title));
            this.chartData1 = ary[0].yData.lineData;
            this.chartData2 = ary[0].yData.histogramData;
            this.xAxisData = ary[0].xData;
            this.tabActive = index;
        },

        // 请求超限指标详情
        getLimitInfo() {
            const params = {
                deptid: this.deptId,
                startTime: this.startTime,
                endTime: this.endTime,
                limit: this.pageSize,
                pageNo: this.currentPage,
                reported: '1',
            };
            getLimitInfoData(params).then((res) => {
                const {
                    rows,
                    code,
                } = res.data;
                if (code === 200 || code === 0) {
                    window.console.log('请求超限指标详情', rows);
                    this.limitData = rows;
                    // this.limitVisible = true;
                }
            }).catch((err) => {
                window.console.log('请求超限指标详情', err);
            });
        },

        // 选择页码改变
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getLimitInfo();
        },
    },
    created() {
        this.getFaultLimitDatas();
    },
};
</script>
<style lang='scss'>
.fault-limits {
    width: 100%;
    height: 100%;
    position: relative;

    .dept-tabs {
        position: absolute;
        top: -.6rem; // 22
        left: 3.61rem; // 140
        width: 72%;
        overflow: auto;

        ul {
            width: 100%;

            li {
                //width: 2.56rem /* 92/80 */;
                width: 24%;
                height: .5rem /* 22/80 */;
                background: url('../../assets/tab.png') no-repeat center center;
                background-size: 100% 100%;
                float: left;
                font-size: .33rem;// 12
                color: #fff;
                text-align: center;
                line-height: .5rem /* 22/80 */;
                //margin-right: .11rem /* 4/80 */;
                margin-right: 1%;
                cursor: pointer;

                &:last-child {
                    width: 25%;
                    margin-right: 0;
                }
            }

            .tab-active {
                background: url('../../assets/tab_act.png') no-repeat center center;
                background-size: 100% 100%;
            }
        }
    }

    .pagination {
        height: 1.5rem;
        height: 1.5rem;
        padding-top: .5rem;
        box-sizing: border-box;

        @import '../../common/styles/rpage.scss';
    }

    @import '../../common/styles/dialog.scss';
    @import '../../common/styles/rtb.scss';

}
.el-tooltip__popper {
    font-size: .389rem;
    max-width: 25%;
    line-height: 1.4;
    padding: .33rem;
    border-radius: .11rem;
}
</style>
